<template>
  <div class="student-request">
    
    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="申请学生">
          <el-input v-model="searchForm.student" placeholder="请输入申请学生姓名" />
        </el-form-item>
        <el-form-item label="目标企业">
          <el-input v-model="searchForm.company" placeholder="请输入目标企业名称" />
        </el-form-item>
        <el-form-item label="请求状态">
          <el-select v-model="searchForm.status" placeholder="请选择请求状态" style="width: 200px;">
            <el-option label="全部" value="" />
            <el-option label="已提交" value="submitted" />
            <el-option label="对接成功" value="successful_match" />
            <el-option label="对接失败" value="failed_match" />
            <el-option label="待处理" value="pending" />
            <el-option label="已批准" value="approved" />
            <el-option label="已关闭" value="closed" />
            <el-option label="平台审核中" value="platform_reviewing" />
            <el-option label="不匹配" value="not_matching" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 数据表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <span>学生对接请求列表</span>
          <el-button type="primary" @click="handleRefresh">刷新</el-button>
        </div>
      </template>
      
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="student" label="申请学生" min-width="15%" />
        <el-table-column prop="company" label="目标企业" min-width="20%" />
        <el-table-column prop="demandTitle" label="需求标题" min-width="20%" />
        <el-table-column prop="applyTime" label="申请时间" min-width="15%" />
        <el-table-column prop="status" label="请求状态" min-width="12%">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.statusText || getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="查看" min-width="15%">
          <template #default="scope">
            <el-button type="info" size="small" @click="handleViewBothDetails(scope.row)">
              查看双方信息
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="20%">
          <template #default="scope">
            <div class="operation-buttons">
              <el-button 
                v-if="scope.row.status === 'pending' || scope.row.status === 'platform_reviewing' || scope.row.status === 'submitted'"
                type="primary" 
                size="small" 
                style="width: 70px; margin-right: 5px;"
                @click="handleApprove(scope.row)"
              >
                批准
              </el-button>
              <el-button 
                v-if="scope.row.status === 'pending' || scope.row.status === 'platform_reviewing' || scope.row.status === 'submitted'"
                type="danger" 
                size="small" 
                style="width: 70px; margin-right: 5px;"
                @click="handleClose(scope.row)"
              >
                关闭
              </el-button>
                          <el-button 
              v-if="scope.row.status === 'pending' || scope.row.status === 'platform_reviewing' || scope.row.status === 'submitted' || scope.row.status === 'recommended_to_enterprise'"
              type="warning" 
              size="small" 
              style="width: 70px;"
              @click="handleReject(scope.row)"
            >
              驳回
            </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="请求详情"
      width="60%"
    >
      <div v-if="currentDetail" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请学生">{{ currentDetail.student }}</el-descriptions-item>
          <el-descriptions-item label="目标企业">{{ currentDetail.company }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ currentDetail.applyTime }}</el-descriptions-item>
          <el-descriptions-item label="请求状态">
            <el-tag :type="getStatusType(currentDetail.status)">
              {{ currentDetail.statusText || getStatusText(currentDetail.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentDetail.phone || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="联系邮箱">{{ currentDetail.email || '暂无' }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="detail-section">
          <h4>申请理由</h4>
          <p>{{ currentDetail.reason || '暂无' }}</p>
        </div>
        
        <div class="detail-section">
          <h4>详细描述</h4>
          <p>{{ currentDetail.description || '暂无' }}</p>
        </div>
        
        <div class="detail-section" v-if="currentDetail.closeReason">
          <h4>关闭理由</h4>
          <p>{{ currentDetail.closeReason }}</p>
        </div>
      </div>
    </el-dialog>
    
    <!-- 关闭请求对话框 -->
    <el-dialog
      v-model="closeDialogVisible"
      title="关闭请求"
      width="40%"
    >
      <el-form :model="closeForm" label-width="80px">
        <el-form-item label="关闭理由" required>
          <el-input
            v-model="closeForm.reason"
            type="textarea"
            :rows="4"
            placeholder="请输入关闭理由"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmClose">确认关闭</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 驳回请求对话框 -->
    <el-dialog
      v-model="rejectDialogVisible"
      title="驳回申请"
      width="40%"
    >
      <el-form :model="rejectForm" label-width="80px">
        <el-form-item label="驳回理由" required>
          <el-input
            v-model="rejectForm.reason"
            type="textarea"
            :rows="4"
            placeholder="请输入驳回理由"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rejectDialogVisible = false">取消</el-button>
          <el-button type="warning" @click="handleConfirmReject">确认驳回</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 双方详细信息对话框 -->
    <el-dialog
      v-model="bothDetailsDialogVisible"
      title="双方详细信息"
      width="80%"
    >
      <div v-if="bothDetails" class="both-details">
        <!-- 申请信息 -->
        <div class="detail-section">
          <h4>申请信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="申请ID">{{ bothDetails.applicationInfo?.applicationId }}</el-descriptions-item>
            <el-descriptions-item label="申请时间">{{ formatDateTime(bothDetails.applicationInfo?.applicationTime) }}</el-descriptions-item>
            <el-descriptions-item label="申请状态">
              <el-tag :type="getStatusType(bothDetails.applicationInfo?.applicationStatus)">
                {{ getStatusText(bothDetails.applicationInfo?.applicationStatus) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item v-if="bothDetails.applicationInfo?.rejectionReason" label="驳回理由" :span="2">
              {{ bothDetails.applicationInfo.rejectionReason }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        
        <!-- 企业信息 -->
        <div class="detail-section">
          <h4>企业信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="企业名称">{{ bothDetails.enterpriseDetails?.companyFullName }}</el-descriptions-item>
            <el-descriptions-item label="行业">{{ bothDetails.enterpriseDetails?.industry }}</el-descriptions-item>
            <el-descriptions-item label="企业规模">{{ bothDetails.enterpriseDetails?.companyScale }}</el-descriptions-item>
            <el-descriptions-item label="主营业务">{{ bothDetails.enterpriseDetails?.mainBusiness }}</el-descriptions-item>
            <el-descriptions-item label="企业地址">{{ bothDetails.enterpriseDetails?.companyAddress }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ bothDetails.enterpriseDetails?.operatorName }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ bothDetails.enterpriseDetails?.contactPhoneNumber }}</el-descriptions-item>
            <el-descriptions-item label="联系邮箱">{{ bothDetails.enterpriseDetails?.contactEmail }}</el-descriptions-item>
            <el-descriptions-item label="认证状态">
              <el-tag :type="bothDetails.enterpriseDetails?.certificationStatus === 'approved' ? 'success' : 'danger'">
                {{ bothDetails.enterpriseDetails?.certificationStatus === 'approved' ? '已认证' : '未认证' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="社会信用代码">{{ bothDetails.enterpriseDetails?.socialCreditCode }}</el-descriptions-item>
            <el-descriptions-item label="企业介绍" :span="2">{{ bothDetails.enterpriseDetails?.companyIntroduction }}</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <!-- 学生信息 -->
        <div class="detail-section">
          <h4>学生信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="学生姓名">{{ bothDetails.studentDetails?.fullName }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ bothDetails.studentDetails?.gender === 'male' ? '男' : '女' }}</el-descriptions-item>
            <el-descriptions-item label="国籍">{{ bothDetails.studentDetails?.nationality }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ formatDate(bothDetails.studentDetails?.dateOfBirth) }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ bothDetails.studentDetails?.phoneNumber }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ bothDetails.studentDetails?.email }}</el-descriptions-item>
            <el-descriptions-item label="微信/WhatsApp">{{ bothDetails.studentDetails?.wechatWhatsapp }}</el-descriptions-item>
            <el-descriptions-item label="简历状态">
              <el-tag :type="bothDetails.studentDetails?.resumeStatus === 'approved' ? 'success' : bothDetails.studentDetails?.resumeStatus === 'incomplete' ? 'danger' : 'warning'">
                {{ bothDetails.studentDetails?.resumeStatus === 'approved' ? '已通过' : bothDetails.studentDetails?.resumeStatus === 'incomplete' ? '不完整' : '待审核' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item v-if="bothDetails.studentDetails?.rejectionReason" label="驳回理由" :span="2">
              {{ bothDetails.studentDetails.rejectionReason }}
            </el-descriptions-item>
            <el-descriptions-item v-if="bothDetails.studentDetails?.resumeContent" label="简历内容" :span="2">
              <div v-html="bothDetails.studentDetails.resumeContent"></div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        
        <!-- 需求详情 -->
        <div class="detail-section" v-if="bothDetails.demandDetails">
          <h4>需求详情</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="需求标题">{{ bothDetails.demandDetails?.title }}</el-descriptions-item>
            <el-descriptions-item label="需求类型">
              <el-tag :type="bothDetails.demandDetails?.demandType === 'trade' ? 'success' : 'warning'">
                {{ bothDetails.demandDetails?.demandType === 'trade' ? '贸易' : '人才' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="工作地点">{{ bothDetails.demandDetails?.location }}</el-descriptions-item>
            <el-descriptions-item label="薪资范围">{{ bothDetails.demandDetails?.salaryRange }}</el-descriptions-item>
            <el-descriptions-item label="合作方式">{{ bothDetails.demandDetails?.cooperationMode }}</el-descriptions-item>
            <el-descriptions-item label="经验要求">{{ bothDetails.demandDetails?.experienceRequirements }}</el-descriptions-item>
            <el-descriptions-item label="学历要求">{{ bothDetails.demandDetails?.degreeRequirements }}</el-descriptions-item>
            <el-descriptions-item label="专业要求">{{ bothDetails.demandDetails?.majorRequirements }}</el-descriptions-item>
            <el-descriptions-item label="语言要求">{{ bothDetails.demandDetails?.languageRequirements }}</el-descriptions-item>
            <el-descriptions-item label="目标国籍">{{ bothDetails.demandDetails?.targetNationalities }}</el-descriptions-item>
            <el-descriptions-item label="需求状态">
              <el-tag :type="getDemandStatusType(bothDetails.demandDetails?.demandStatus)">
                {{ getDemandStatusText(bothDetails.demandDetails?.demandStatus) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="发布时间">{{ formatDateTime(bothDetails.demandDetails?.publishTime) }}</el-descriptions-item>
            <el-descriptions-item label="有效期至">{{ formatDateTime(bothDetails.demandDetails?.validityPeriod) }}</el-descriptions-item>
            <el-descriptions-item v-if="bothDetails.demandDetails?.rejectionReason" label="驳回理由" :span="2">
              {{ bothDetails.demandDetails.rejectionReason }}
            </el-descriptions-item>
          </el-descriptions>
          
          <div class="detail-content-section">
            <h5>需求描述</h5>
            <div v-html="bothDetails.demandDetails?.description"></div>
          </div>
          
          <div class="detail-content-section">
            <h5>任职要求</h5>
            <div v-html="bothDetails.demandDetails?.requirements"></div>
          </div>
          
          <div class="detail-content-section">
            <h5>薪资福利</h5>
            <div v-html="bothDetails.demandDetails?.benefits"></div>
          </div>
          
          <div class="detail-content-section">
            <h5>公司优势</h5>
            <div v-html="bothDetails.demandDetails?.companyAdvantages"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getStudentApplications, searchStudentApplications, getStudentApplicationDetails, approveStudentApplication, rejectStudentApplication } from '@/api/request'

const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const detailDialogVisible = ref(false)
const closeDialogVisible = ref(false)
const rejectDialogVisible = ref(false)
const bothDetailsDialogVisible = ref(false)
const currentDetail = ref(null)
const bothDetails = ref(null)

const searchForm = reactive({
  student: '',
  company: '',
  status: '',
  dateRange: []
})

const closeForm = reactive({
  reason: ''
})

const rejectForm = reactive({
  reason: ''
})

const tableData = ref([])

// 获取学生申请列表数据
const fetchStudentApplications = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value
    }
    
    const response = await getStudentApplications(params)
    
    if (response.code === 200) {
      tableData.value = response.data.requests.map(request => ({
        id: request.requestId,
        student: request.studentName,
        company: request.companyName,
        applyTime: formatDateTime(request.requestTime),
        status: request.requestStatus,
        statusText: request.statusText,
        requestType: request.requestType,
        requestTypeText: request.requestTypeText,
        demandTitle: request.demandTitle,
        contact: '',
        phone: '',
        email: '',
        reason: '',
        description: '',
        closeReason: null
      }))
      total.value = response.data.total
    } else {
      ElMessage.error(response.message || '获取学生申请列表失败')
    }
  } catch (error) {
    console.error('获取学生申请列表失败:', error)
    ElMessage.error('获取学生申请列表失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

// 使用筛选接口获取学生申请列表数据
const fetchStudentApplicationsWithSearch = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      sortBy: 'applicationTime',
      sortOrder: 'desc'
    }
    
    // 添加搜索条件
    if (searchForm.student) {
      params.studentName = searchForm.student
    }
    if (searchForm.company) {
      params.companyName = searchForm.company
    }
    if (searchForm.status) {
      params.requestStatus = searchForm.status
    }
    
    const response = await searchStudentApplications(params)
    
    if (response.code === 200) {
      tableData.value = response.data.requests.map(request => ({
        id: request.requestId,
        student: request.studentName,
        company: request.companyName,
        applyTime: formatDateTime(request.requestTime),
        status: request.requestStatus,
        statusText: request.statusText,
        requestType: request.requestType,
        requestTypeText: request.requestTypeText,
        demandTitle: request.demandTitle,
        contact: '',
        phone: '',
        email: '',
        reason: '',
        description: '',
        closeReason: null
      }))
      total.value = response.data.total
    } else {
      ElMessage.error(response.message || '搜索学生申请列表失败')
    }
  } catch (error) {
    console.error('搜索学生申请列表失败:', error)
    ElMessage.error('搜索学生申请列表失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return ''
  const date = new Date(dateTimeStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 获取需求状态类型
const getDemandStatusType = (status) => {
  const statusMap = {
    draft: 'info',
    pending_review: 'warning',
    online: 'success',
    closed: 'info',
    rejected: 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取需求状态文本
const getDemandStatusText = (status) => {
  const statusMap = {
    draft: '草稿',
    pending_review: '待审核',
    online: '在线',
    closed: '已关闭',
    rejected: '驳回'
  }
  return statusMap[status] || '未知'
}

const getStatusType = (status) => {
  const statusMap = {
    submitted: 'warning',
    successful_match: 'success',
    failed_match: 'danger',
    pending: 'warning',
    approved: 'success',
    closed: 'danger',
    platform_reviewing: 'warning',
    not_matching: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    submitted: '已提交',
    successful_match: '对接成功',
    failed_match: '对接失败',
    pending: '待处理',
    approved: '已批准',
    closed: '已关闭',
    platform_reviewing: '平台审核中',
    not_matching: '不匹配'
  }
  return statusMap[status] || '未知'
}

const handleSearch = () => {
  currentPage.value = 1
  fetchStudentApplicationsWithSearch()
}

const handleReset = () => {
  searchForm.student = ''
  searchForm.company = ''
  searchForm.status = ''
  searchForm.dateRange = []
  currentPage.value = 1
  fetchStudentApplicationsWithSearch()
}

const handleRefresh = () => {
  fetchStudentApplicationsWithSearch()
}

const handleViewDetail = (row) => {
  currentDetail.value = row
  detailDialogVisible.value = true
}

const handleViewBothDetails = async (row) => {
  try {
    loading.value = true
    const response = await getStudentApplicationDetails(row.id)
    
    if (response.code === 200) {
      bothDetails.value = response.data
      bothDetailsDialogVisible.value = true
    } else {
      ElMessage.error(response.message || '获取双方详细信息失败')
    }
  } catch (error) {
    console.error('获取双方详细信息失败:', error)
    ElMessage.error('获取双方详细信息失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

const handleViewCompany = (row) => {
  // 查看企业详情
  console.log('查看企业详情:', row.company)
}

const handleViewStudent = (row) => {
  // 查看学生详情
  console.log('查看学生详情:', row.student)
}

const handleApprove = (row) => {
  ElMessageBox.confirm(
    '确定要批准该学生申请吗？批准后将向双方发送联系方式。',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      loading.value = true
      const response = await approveStudentApplication(row.id)
      
      if (response.code === 200) {
        ElMessage.success(response.message || '学生申请已批准，已向双方发送联系方式')
        // 刷新列表数据
        fetchStudentApplicationsWithSearch()
      } else {
        ElMessage.error(response.message || '批准操作失败')
      }
    } catch (error) {
      console.error('批准学生申请失败:', error)
      ElMessage.error('批准操作失败，请检查网络连接')
    } finally {
      loading.value = false
    }
  }).catch(() => {
    // 用户取消操作
    ElMessage.info('已取消操作')
  })
}

const handleClose = (row) => {
  currentDetail.value = row
  closeForm.reason = ''
  closeDialogVisible.value = true
}

const handleConfirmClose = () => {
  if (!closeForm.reason.trim()) {
    ElMessage.warning('请输入关闭理由')
    return
  }
  
  // 实现关闭逻辑
  ElMessage.success('请求已关闭')
  closeDialogVisible.value = false
}

const handleReject = (row) => {
  currentDetail.value = row
  rejectForm.reason = ''
  rejectDialogVisible.value = true
}

const handleConfirmReject = async () => {
  if (!rejectForm.reason.trim()) {
    ElMessage.warning('请输入驳回理由')
    return
  }
  
  try {
    loading.value = true
    const response = await rejectStudentApplication(currentDetail.value.id, rejectForm.reason)
    
    if (response.code === 200) {
      ElMessage.success('申请已驳回')
      rejectDialogVisible.value = false
      // 刷新列表数据
      fetchStudentApplicationsWithSearch()
    } else {
      ElMessage.error(response.message || '驳回操作失败')
    }
  } catch (error) {
    console.error('驳回学生申请失败:', error)
    ElMessage.error('驳回操作失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchStudentApplicationsWithSearch()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchStudentApplicationsWithSearch()
}

onMounted(() => {
  // 初始化数据
  fetchStudentApplicationsWithSearch()
})
</script>

<style scoped>
.student-request {
  padding: 20px;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.student-request h2 {
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.search-card {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.search-form .el-form-item {
  margin-bottom: 0;
  margin-right: 0;
}

.table-card {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
}

/* 表格样式优化 */
:deep(.el-table) {
  width: 100% !important;
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #fafafa;
  font-weight: 600;
  color: #333;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-table .cell) {
  padding: 0 12px;
}

/* 表格列宽度优化 */
:deep(.el-table .el-table__column) {
  min-width: 120px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
  padding: 10px 0;
}

.detail-section {
  margin-top: 20px;
}

.detail-section h4 {
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
}

/* 移除按钮和弹窗的黑色边框 */
:deep(.el-button:focus) {
  outline: none !important;
  border-color: transparent !important;
}

:deep(.el-button:focus-visible) {
  outline: none !important;
  border-color: transparent !important;
}

:deep(.el-dialog__headerbtn:focus) {
  outline: none !important;
}

:deep(.el-dialog__headerbtn:focus-visible) {
  outline: none !important;
}

:deep(.el-input:focus-within) {
  outline: none !important;
}

:deep(.el-select:focus-within) {
  outline: none !important;
}

:deep(.el-textarea:focus-within) {
  outline: none !important;
}

:deep(.el-date-editor:focus-within) {
  outline: none !important;
}

/* 双方详细信息样式 */
.both-details {
  max-height: 70vh;
  overflow-y: auto;
}

.both-details .detail-section {
  margin-bottom: 30px;
}

.both-details .detail-section h4 {
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 5px;
}

.detail-content-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
}

.detail-content-section h5 {
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

.detail-content-section div {
  line-height: 1.6;
  color: #666;
}

.detail-content-section ul {
  margin: 10px 0;
  padding-left: 20px;
}

.detail-content-section li {
  margin-bottom: 5px;
}

.operation-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .student-request {
    padding: 10px;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-form .el-form-item {
    width: 100%;
  }
}
</style> 